<template>
    <div class="box">
      <CKTechButton type="data" size="small">
        <template #icon>
          <HomeIcon />
        </template>
      </CKTechButton>
      <CKTechButton type="city">
        <template #icon>
          <SettingsIcon />
        </template>
      </CKTechButton>
      <CKTechButton type="halo" size="large">
        <template #icon>
          <AddIcon />
        </template>
      </CKTechButton>

      <br>
      <CKTechButton type="hologram" size="large" :icon="HomeIcon" />
      <CKTechButton type="metal" size="large" :icon="HomeIcon" />
      <CKTechButton type="circuit" size="large" :icon="HomeIcon" />
      <CKTechButton type="space" size="large" :icon="HomeIcon" />
    </div>
</template>


<script setup lang="ts">
//@ts-ignore
import { CKTechButton } from "@pgh-big-screen/vue-ui"
import HomeIcon from "@examples/assets/svg/home.svg"
import SettingsIcon from "@examples/assets/svg/setting.svg"
import AddIcon from "@examples/assets/svg/add.svg"

</script>

<style lang="scss" scoped>

</style>>
